<template>
	<view class="body">
		<view class="">


			<view class="top-header">
				<text class="app-name">待上门订单</text>
			</view>
			<view class="address-box">
				<image class="address-icon" src="../../../static/zhong.png"></image>
				<text class="address"> </text>
				<image class="text-btn" src="../../../static/set.png"></image>
			</view>
			<view class="card-list">
				<view class="card-item" v-for="item in list" :key="item.id" @click="navigateToorderDetails(item.id)">
					<view class="card-top">
						<view class="card-text card-text-top">
							<view class="card-dot card-dot-top"></view>
							<text class="address">{{ item.recycleAddress }}</text>
						</view>

						<view class="card-text ">
							<view class="card-left">订单编号：</view>
							<text class="card-right">{{item.id}}</text>
						</view>
						<view class="card-text ">
							<view class="card-left">上门时间：</view>
							<text class="card-right">{{item.scheduledTime}}</text>
						</view>

						<view class="card-text ">
							<view class="card-left">预估重量：</view>
							<text class="card-right">{{item.minWeight + '-' + item.maxWeight + 'Kg'}}</text>
						</view>
						<view class="card-text ">
							<view class="card-left">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注：</view>
							<text class="card-right">{{item.remark}}</text>
						</view>

					</view>
					<view class="card-bottom">
						<view class="order-infos">
							<view class="order-item">
								<view class="order-title">距离</view>
								<view class="order-result"><text class="speciltext">{{ item.recycleName }}KM</text>
								</view>
							</view>
							<view class="order-item">
								<view class="order-title">回收品类</view>
								<view class="order-result"><text class="speciltext">{{ item.rubbishCategory }}</text>
								</view>
							</view>
							<view class="order-item">
								<view class="order-title">预估费用</view>
								<view class="order-result"><text class="price">￥{{ item.price }}</text>
								</view>
							</view>
						</view>
						<view class="order-action">
							<image class="clock-icon" src="../../../static/clock.png"></image>
							<text class="order-time"> {{ item.createTime }}下单</text>
							<view class="action-button" @click="orderReceiving(item.id)">待进行</view>
						</view>
					</view>
				</view>
				<u-loadmore />
			</view>


		</view>
		<!-- 底部导航栏 -->
		<u-tabbar :value="value1" @change="name => value1 = name" :fixed="true" :placeholder="true"
			:safeAreaInsetBottom="true">
			<u-tabbar-item text="接单大厅" icon="home" @click="click1"></u-tabbar-item>
			<u-tabbar-item text="待上门" icon="account"></u-tabbar-item>
			<u-tabbar-item text="我的" icon="account" @click="click3"></u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	import OrderApi from '@/common/FindingService/OrderApi.js';
	export default {
		data() {
			return {
				value1: 1,
				select: 0,
				storeId: '',
				list: []

			}
		},
		created() {
			this.user = uni.getStorageSync('user');
			console.log('用户列表', this.user)
			this.orderList()
		},
		methods: {
			//点击订单详情
			navigateToorderDetails(id) {
				uni.navigateTo({
					url: '/pages/invite/details/details?id=' + id

				});

			},
			//计算距离
			calculateDistance(lat1, lon1, lat2, lon2) {
				const earthRadius = 6371; // 地球半径，单位为千米
				const dLat = this.toRadians(lat2 - lat1);
				const dLon = this.toRadians(lon2 - lon1);

				const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
					Math.cos(this.toRadians(lat1)) * Math.cos(this.toRadians(lat2)) *
					Math.sin(dLon / 2) * Math.sin(dLon / 2);

				const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
				const distance = earthRadius * c;

				// 保留两位小数
				return distance.toFixed(2);
			},

			toRadians(degrees) {
				return degrees * (Math.PI / 180);
			},
			//根据骑手id和店铺id查询订单
			orderList() {
				let params = {
					addressId: this.user.storesId,
					recycleId: this.user.id,
					flag: 3
				}
				OrderApi.queryStoreIdUserId(params).then(res => {
					this.list = res.data.data
					console.log('已接单', this.list)
					for (var i = 0; i < this.list.length; i++) {
						var price1 = this.list[i].minWeight * this.list[i].price
						var price2 = this.list[i].maxWeight * this.list[i].price
						this.list[i].price = price1 + '-' + price2 + '元'

						if (this.list[i].remark == '') {
							this.list[i].remark = '无'
						}
						this.list[i].recycleName = this.calculateDistance(this.list[i].recycleLat, this.list[i]
							.recycleLon,
							this.list[i].shopLat, this.list[i].shopLon)








					}

				})

			},
			click1() {
				uni.navigateTo({
					url: '/pages/invite/invite'

				});
			},
			click3() {
				uni.navigateTo({
					url: '/pages/invite/mine/mine'

				});
			}
		}
	}
</script>

<style lang="scss">
	.card-left {
		font-weight: bold;
	}

	.body {
		height: 100vh;
		width: 100vw;
		position: relative;

		.pop-btn {
			display: flex;
			padding: 60rpx 26rpx 40rpx 26rpx;
			justify-content: space-between;
			// padding-bottom: 40rpx;
			width: 100%;

			.pop-btn-cancel {
				width: 232rpx;
			}

			.pop-btn-confirm {
				width: 440rpx;
			}
		}

		.form-box {
			margin: 0 26rpx;
			border-bottom: 1rpx solid #EEEEEE;
			padding: 40rpx 0;

			.form-item {

				// margin-bottom: 20rpx;
				.tip-text {
					text-align: center;
					color: #333333;
					line-height: 40rpx;
					font-size: 28rpx;

					text {
						color: #00C265;
					}
				}

				.form-item-label {
					color: #333333;
					font-size: 30rpx;
					line-height: 42rpx;
					margin-bottom: 20rpx;
					text-align: center;
				}

				.form-item-input {
					background: #F8F8F8;

					input {
						height: 60rpx;
						display: block;
						padding: 14rpx 40rpx;
						color: #333333;
						font-size: 28rpx;

					}

					textarea {
						height: 160rpx;
						padding: 40rpx;
						color: #333333;
						font-size: 28rpx;
					}
				}
			}
		}

		.top-header {
			overflow: hidden;
			width: 100%;
			padding: 0 26rpx;
			padding-top: 30rpx;

			.app-name {
				float: left;
				color: #333333;
				font-size: 44rpx;
				font-weight: 500;
			}
		}

		.address-box {
			overflow: hidden;
			margin-top: 40rpx;
			height: 80rpx;
			background: #F2FFF9;
			padding: 0 26rpx;

			.address-icon {
				width: 40rpx;
				height: 40rpx;
				margin-top: 20rpx;
				float: left;
			}

			.address {
				float: left;
				color: #333333;
				font-size: 28rpx;
				margin-left: 10rpx;
				line-height: 80rpx;
			}

			.text-btn {
				width: 40rpx;
				height: 40rpx;
				margin-top: 20rpx;
				float: right;
			}
		}

		.card-list {
			padding: 0 30rpx;
			margin-top: 20rpx;

			.card-item {
				padding: 0 20rpx;
				border-radius: 16rpx;
				background: #FFFFFF;
				box-shadow: 0px 2px 8px 0px rgba(68, 68, 68, 0.15);
				margin-bottom: 24rpx;

				.card-top {
					border-bottom: 1rpx solid #E4E7ED;
					padding: 20rpx 0;

					.card-text {
						display: flex;
						overflow: hidden;
						font-size: 30rpx;
						color: #333333;
						line-height: 42rpx;
						margin-bottom: 10rpx;

						.card-dot {
							width: 16rpx;
							height: 16rpx;
							border-radius: 50%;
							float: left;
							margin-top: 13rpx;
							margin-right: 10rpx;
						}

						.card-dot-top {
							background: #18B566;
						}

						.card-dot-bottom {
							background: #FA3534;
						}
					}

					.card-text-top {
						margin-bottom: 20rpx;
					}
				}

				.card-bottom {
					padding-bottom: 20rpx;

					.order-infos {
						display: flex;
						padding: 20rpx 0;

						.order-item {
							flex: 1;
							text-align: center;

							.order-title {
								line-height: 1;
								font-size: 28rpx;
								color: #333333;
								margin-bottom: 20rpx;
							}

							.order-result {
								color: #111111;
								font-size: 26rpx;
								line-height: 42rpx;

								.speciltext {
									color: #19BE6B;
									font-size: 32rpx;
								}

								.price {
									color: #FF9900;
								}
							}
						}
					}

					.order-action {
						overflow: hidden;
						height: 74rpx;

						.clock-icon {
							height: 40rpx;
							float: left;
							width: 40rpx;
							margin-top: 17rpx;
							margin-right: 20rpx;
						}

						.order-time {
							color: #AAAAAA;
							font-size: 28rpx;
							float: left;
							line-height: 74rpx;
						}

						.action-button {
							float: right;
							width: 210rpx;
							height: 74rpx;
							background: linear-gradient(90deg, #c84a01 0%, #d40000 100%);
							fontSize: 30rpx;
							text-align: center;
							line-height: 74rpx;
							border-radius: 12rpx;
							color: #FFFFFF;
						}
					}
				}
			}
		}
	}
</style>